<template>
  <div id="index">
    <div class="imgWrap">
      <img src="@/assets/images/index/01.png">
    </div>

    <van-tabs v-model:active="active" scrollspy sticky >
      <van-tab :title="'立即投保'">
        <div class="ljtb">
          <div class="jfr">
            <div class="policyholder-title">
              <div class="policyholder-title-header"></div>
              <p>本人信息（缴费人）</p>
            </div>
              <use-info :policyholderData="policyholderData"></use-info>
          </div>
          <div class="jfr">
            <div class="policyholder-title">
              <div class="policyholder-title-header"></div>
              <p>为谁投保（被保人）</p>
            </div>
              <policy-holder :policyholder="policyholderData"></policy-holder>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'保障内容'">
        <div class="imgWrap">
          <img src="@/assets/images/index/02.png">
        </div>
        <div class="imgWrap">
          <img src="@/assets/images/index/03.png">
        </div>
        <div class="imgWrap">
          <img src="@/assets/images/index/04.png">
        </div>
        <div class="imgWrap">
          <img src="@/assets/images/index/05.png">
        </div>
        <div class="imgWrap">
          <img src="@/assets/images/index/06.png">
        </div>
      </van-tab>
      <van-tab :title="'常见问题'">
        <div class="imgWrap">
          <img src="@/assets/images/index/07.png">
        </div>
      </van-tab>
      <van-tab :title="'案例推演'">
        <div class="imgWrap">
          <img src="@/assets/images/index/08.png">
        </div>
      </van-tab>
    </van-tabs>
    
     <div  style="padding-bottom:20px;text-align:center;">
      <a href="http://wx.vzan.com/live/tvchat-1926160906?v=637350964572750399">
        <img src="@/assets/images/index/callcenter.png" class="tel-icon" />
        <p style="color:#fba519;" class="tel-content">
          在线客服
        </p>
      </a>
    </div>
    <div class="imgWrap bxsm">
      <img
        src="@/assets/images/index/tel.png"
        @click="callcenter('07683272666')"
        style="width:3.12rem"
      />

    </div>
    
    <div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>
      
    <div class="fixedButton">
      <div class="total-price">
        价格:
        <span>￥59</span>
        <span style="color:#000;font-size:0.12rem">/人</span>
      </div>
      <van-button class="insert-btn" type="default">立即投保</van-button>
      
      
    </div>

  </div>
</template>

<script lang="ts">

import { watchEffect,reactive,toRefs,watch,computed, ref,onMounted,defineComponent } from 'vue';
// import { Button as VanButton,Tab as VanTab, Tabs as VanTabs } from 'vant';
import useInfo from './components/info.vue'; // @ is an alias to /src
import policyHolder from './components/policyHolder.vue'
export default defineComponent({
  name: 'index',
  components: {
    // VanButton,
    // VanTab,
    // VanTabs,
    useInfo,
    policyHolder
  },
  setup(){
    // 数据双向绑定
    const state=reactive({
      policyholderData:{
        name: "",//姓名
        idType: "1",//1身份证  2护照 6港澳台回乡证
        idNumber: "",//证件号
        birthday: "",//生日
        sex: "",//性别
        phoneNo: "",//手机号
        smsCode: "",//验证码
      },
    })
    const count = ref(0)
    const obj={
      name:"zwb"
    }
    const val=ref(obj)
    watchEffect(() => {
      console.log(11111)
      console.log(count.value)
      console.log(val.value.name)
      
    })
    watch([state.policyholderData],(newValues, prevValues)=>{
      console.log("***index****")
      console.log(state.policyholderData)
    })

    // -> 打印出 0    
    // setTimeout(() => {
    //   val.value.name="ZS"
    // }, 100)

    onMounted(() => {
        console.log('组件挂在结束开始打印。。。')
    })

    const active=ref(1)
    return{
      ...toRefs(state),

      active,
      shareCode: "",
      shareFrom: "",
    }
  }
});
</script>
<style lang="less" scoped>
@import url("./style.less");
</style>
